import React from 'react';
import { HappySpin } from '@deepfos/happy';
import type { StandardAreaProps } from '@deepfos/pact/es/ElementDashboard/dashboard-2-0-0';
import ListTableHookMain from './listTableHookMain';
import FormListTable from './Table';

export interface IFormListMain {
  type?: string; // EDIT-编辑视图预览， modal-弹框嵌入
  baseParams?: IBaseParamsProp;
  // 仪表盘展示协议支持
  bidSupport?: StandardAreaProps;
}

export interface IBaseParamsProp {
  elementDetail?: {
    elementName: string;
    folderId?: string;
    path?: string;
  }; // 清单表元素信息
  screen?: IScreenProp[]; // 筛选条件参数
  // pov?: { [key: string]: any }; // pov 参数值
  checkedBack?: (listData: any) => void; // 获取勾选清单表行数据
  povValList?: IModalPageProp[]; // 弹框配置pov的默认参数
  defPovObj?: any; // 通过弹框povValList处理得到参数
  checkedLimit?: number; // 行checkbox可勾选的最多条数
  getPov?: (fun: () => void) => void; // 获取清单页获取pov的方法
}

interface IScreenProp {
  colAlias: string; // 列别名
  filterType: string; // 筛选条件类型（对应弹框的数据中的key为filterParam）
  valueType: string; // 字段类型
  value: string | number; // 查询值
}
// 弹框带入的
interface IModalPageProp {
  autoFill: boolean; // 是否填充
  alias: string; // pov别名(入参名称)
  isDisplay: boolean; // 是否隐藏该pov
  value: string; // 填充pov的值
}

/**
 * 清单表配置界面
 */
const ListTable: React.FC<IFormListMain> = ({
  type,
  baseParams = { povValList: [], getPov: undefined },
  bidSupport,
}) => {
  const lstContentRef = React.useRef<HTMLDivElement>(null);
  const {
    query,
    state,
    tableForm,
    pagination = {},
    povState,
    loading,
    tableChange,
  } = ListTableHookMain({ baseParams, type, bidSupport, lstContentRef });
  const { listConfigData } = state;

  if (listConfigData?.isFirst === undefined && loading) {
    return <HappySpin />;
  }
  // 显示pov 并且有配置pov 或 配置 工具栏场景下才显示以下结构
  return (
    <div>
      <FormListTable
        size={{ width: 1200, height: 600 }}
        tableChange={tableChange}
        pagination={pagination}
        state={state}
        tableForm={tableForm}
        query={baseParams?.elementDetail || query}
        povHeightInfo={povState.povHeightInfo}
        loading={listConfigData?.isFirst === undefined ? false : loading}
        lineHeight={2}
      />
    </div>
  );
};

export default ListTable;
